<script setup>
import {computed, reactive, toRefs, watch} from 'vue'
import useMainStore from '@/store/main'
import {storeToRefs} from 'pinia'
import modal from '@/utils/modal'
import {ElMessageBox} from 'element-plus'

//接收参数
const props = defineProps({
  contentConfig: {
    type: Object
  },
  deleteFn: {type: Function}
})

//提取设置
const contentConfig = reactive(props.contentConfig)
const {title, table, defaultData, pageConfig, top, tableArr} = toRefs(contentConfig)

//获取数据
const mainStore = useMainStore()
mainStore.fetchResArrayAction(table.value)
const {resArray} = storeToRefs(mainStore)

//定义发射数据
const emit = defineEmits(['edit'])

//编辑表格
const handleEdit = (row) => emit('edit', row)

//删除事件
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定删除${title.value}？`, `删除${title.value}`, {type: 'warning'})
    .then(async () => {
      const deleteFn = props.deleteFn ? props.deleteFn : mainStore.fetchDeleteAction
      await deleteFn(table.value, row._id)
    })
    .catch(() => {
    })
}

//改变状态事件
const handleStatus = async (row, prop, status = row[prop] ? 0 : 1) => {
  await mainStore.fetchEditAction(table.value, row._id, {[prop]: status})
}
</script>

<template>
  <div class="page-content" v-if="!mainStore.isLoading">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h2 class="page-title">{{ top.title }}</h2>
        <span class="page-sub-title">{{ top.subTitle }}</span>
      </div>

      <div class="right">
        <el-button type="primary" v-if="pageConfig?.showAdd" @click="handleEdit(defaultData)">
          新建{{ title }}
        </el-button>
      </div>
    </div>

    <!-- 内容 -->
    <div class="content">
      <el-table :data="resArray">
        <template v-for="{type,itemProps,itemConfig,columnType, ...item} in tableArr" :key="item.prop">
          <el-table-column :fixed="type === 'action' ? 'right': false"
                           :type="columnType" v-bind="item">
            <template #default="{row, $index}">
              <!-- 序号 -->
              <template v-if="type === 'index'">
                <span class="table-index">{{ $index + 1 }}</span>
              </template>

              <!-- 图片 -->
              <template v-else-if="type === 'image'">
                <el-image fit="cover" class="page-image" preview-teleported :preview-src-list="[row[item.prop]]"
                          :src="row[item.prop]"/>
              </template>

              <!-- 状态 -->
              <template v-else-if="type === 'status'">
                <el-text :type="row[item.prop] ? 'success' : 'danger'">
                  {{ row[item.prop] ? itemProps.success : itemProps.failed }}
                </el-text>
              </template>

              <!-- 多元状态 -->
              <template v-else-if="type === 'status-multie'">
                <span>{{ itemProps.statusMap[row[item.prop]] }}</span>
              </template>

              <!-- 时间 -->
              <template v-else-if="type === 'time'">
                <uni-dateformat :date="row[item.prop]" format="yyyy.MM.dd hh:mm:ss"/>
              </template>

              <!-- 操作 -->
              <template v-else-if="type === 'action'">
                <div class="action-box">
                  <template v-for="action in itemProps.actions" :key="action">
                    <!-- 编辑按钮 -->
                    <el-button v-if="action === 'edit'" text bg type="primary" @click="handleEdit(row)">编辑</el-button>

                    <!-- 删除按钮 -->
                    <el-button v-else-if="action === 'delete'" text bg type="danger" @click="handleDelete(row)">删除
                    </el-button>

                    <!-- 状态按钮 -->
                    <el-button v-else-if="action === 'status'" text bg
                               :type="row[itemConfig.statusProp] ? 'danger' : 'success'"
                               @click="handleStatus(row, itemConfig.statusProp)">
                      {{ row[itemConfig.statusProp] ? itemConfig.failed : itemConfig.success }}
                    </el-button>

                    <!-- 多元状态按钮 -->
                    <template
                      v-else-if="action === 'status-multie' && itemConfig.showStatus === row[itemConfig.statusProp]">
                      <template v-for="status in Object.keys(itemConfig.statusMap)" :key="status">
                        <el-button text bg :type="JSON.parse(status) ? 'success' : 'danger'"
                                   @click="handleStatus(row, itemConfig.statusProp, JSON.parse(status))">
                          {{ itemConfig.statusMap[status] }}
                        </el-button>
                      </template>
                    </template>

                    <!-- 自定义 -->
                    <slot :name="action" v-bind="row"></slot>
                  </template>
                </div>
              </template>

              <!-- 自定义 -->
              <template v-else-if="type === 'custom'">
                <slot :name="itemConfig.slotName" v-bind="row"></slot>
              </template>

              <!-- 默认 -->
              <template v-else>
                <span>{{ row[item.prop] }}</span>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-content {
  @include flex-box(false, true);
  gap: $spacing-2;

  .title {
    @include flex-box;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.el-table {
  //border: 1px $divider solid;
  --el-table-row-hover-bg-color: $white;
}

.page-sub-title {
  color: $black-tip;
}

:deep(.el-table__row) {
  @each $key, $value in (1: $red, 2:$yellow, 3:$green) {
    &:nth-of-type(#{$key}) .table-index {
      color: $value;
    }
  }

  .el-table-fixed-column--right {
    background: $white !important;
  }
}

.page-image {
  width: 150px;
  height: 100px;
  background: $light-bg;
}

.action-box {
  @include flex-box(true);
  gap: $spacing-5;
}
</style>
